import React, {useEffect, useRef, useState} from 'react';
import {Button, Form, Input, message, Select} from "antd";
import {typeOptionCreator} from "../utils/typeOptionCreator";
import {useDispatch, useSelector} from "react-redux";
import {getTypeList} from "../store/modules/typeStore";
import '@toast-ui/editor/dist/toastui-editor.css';
import {Editor} from '@toast-ui/react-editor';
import {useNavigate} from "react-router-dom";

function AddIssue(props) {

    const {typeList} = useSelector(state => state.type)
    const {userInfo} = useSelector(state => state.user)
    const formRef = useRef()
    const editorRef = useRef();
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [issueInfo, setIssueInfo] = useState({
        issueTitle: '',
        issueContent: '',
        userId: '',
        typeId: ''
    })
    const handleContent = () => {
        const editorText = editorRef.current.getInstance().getMarkdown()
        setIssueInfo({
            ...issueInfo,
            issueContent: editorText,
            userId: userInfo.loginId
        })
    }
    /**
     * 提交问答的回调
     */
    const onFinish = () => {
        // 将 issueInfo 提交给后端服务器
        // 跳转首页
        navigate('/')
        message.success('你的问题已经提交，审核通过自动发布')
    }
    useEffect(() => {
        dispatch(getTypeList())
    }, [])

    return (
        <div style={{width: '1200px', margin: '0 100px 0 0'}}>
            <Form
                name="add_issue"
                labelCol={{span: 4}}
                wrapperCol={{span: 20}}
                layout="horizontal"
                initialValues={issueInfo}
                autoComplete="off"
                onFinish={onFinish}
                ref={formRef}
                // onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="问题标题"
                    name="issueTitle"
                    style={{
                        width: '100%',
                    }}
                    rules={[
                        {
                            required: true,
                            message: '请输入标题',
                        },
                    ]}
                >
                    <Input
                        style={{width: '100%'}}
                        placeholder="请输入标题"
                        value={issueInfo.issueTitle}
                        onChange={(e) => {
                            setIssueInfo({
                                ...issueInfo,
                                issueTitle: e.target.value
                            })
                        }}
                    />
                </Form.Item>
                <Form.Item
                    label="问题分类"
                    name="typeId"
                    rules={[
                        {
                            required: true,
                            message: '请选择问题所属分类',
                        },
                    ]}
                >
                    <Select
                        placeholder="请选择你的问题分类"
                        value={issueInfo.typeId}
                        onChange={(value) => {
                            setIssueInfo({
                                ...issueInfo,
                                typeId: value
                            })
                        }}
                    >
                        {typeOptionCreator(Select, typeList)}
                    </Select>
                </Form.Item>
                <Form.Item
                    label="问题描述"
                    name="issueContent"
                    rules={[
                        {
                            required: true,
                            message: '请填写问题描述',
                        },
                    ]}
                >
                    <Editor
                        initialValue=""
                        previewStyle="vertical"
                        height="600px"
                        initialEditType="markdown"
                        useCommandShortcut={true}
                        language='zh-CN'
                        ref={editorRef}
                        onChange={handleContent}
                    />
                </Form.Item>

                <Form.Item
                    name='issueSubmit'
                    wrapperCol={{
                        offset: 20,
                        span: 4,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        提交问题
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default AddIssue;